<template>
  <div class="search-box">
    <h3>
      搜索<span class="mar-l search-word">{{requestparams.keywords}}</span>
    </h3>
    <div class="view-tab">
      <ul class="main-tab">
        <li :class="tabActive==index?'tab-item tab-active cur':'tab-item cur'" @click="clickActive(index)" v-for="(item,index) in tabBar" :key="index">{{ item }}</li>
      </ul>
      <p class="search-result-count">搜索条目{{resultCount}}</p>
    </div>
    <!-- 动态组件 -->
    <div class="components-show">
      <component :is="searchComponents[idx]" :singelResult="singelResult"></component>
      <el-pagination
        background
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :page-size="requestparams.limit"
        @current-change="currentPage"
        @prev-click="prevClick"
        @next-click="nextClick"
        :total="resultCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import searchComponents from '@/util/exportSearchComponents.js'
import {getKeyWord,getMoreSongDetail} from '@/request/Api.js'
export default {
  name:'Search',
  created(){
    this.getSingleResult(this.requestparams.keywords,this.requestparams.limit,this.requestparams.current,this.requestparams.type)
  },
  data(){
    return {
      tabBar:['单曲','歌手','专辑','视频','歌单','歌词','播客','声音','用户'],
      tabActive:0,
      // 引入动态组件需要的组件列表
      searchComponents,
      // 当前选中额组件
      idx:0,
      requestparams:{
        keywords:this.$route.query.keywords,
        limit:30,
        current:1,
        type:1
      },
      resultCount:0,
      // 单曲搜索结果列表
      singelResult:[]
    }
  },
  watch:{
    '$route.query':{
      handler(bal,old){
        if(bal.keywords!==old.keywords){
          this.tabActive = 0
          this.idx = 0
          this.requestparams.current = 1
          this.requestparams.type = 1
          this.requestparams.limit = 30
          this.requestparams.keywords = bal.keywords
          this.getSingleResult(this.requestparams.keywords,this.requestparams.limit,this.requestparams.current,this.requestparams.type)
        }
      }
    }
  },
  methods:{
    // tab切换处理函数
    clickActive(idx){
      this.tabActive = idx
      console.log('当前的idx',idx);
      this.idx  = idx
    },
    // 获取对应的类型数据
    async getSingleResult(keywords,limit,current,type){
      let a = this.$loading({target:document.querySelector('.single-list'),text:'拼命加载中'})
      const {data:res} = await getKeyWord(keywords,limit,current,type)
      console.log(res);
      if(res.code!==200){
        return
      }
      // 加工 songs 数据变为专辑 时长
      let songIdArr = []
      res.result.songs.map(item=>{
        songIdArr.push(item.id)
      })
      // 根据id获取歌曲详情
      let {data:result} = await getMoreSongDetail(songIdArr)
      // 给数据加上播放时长
      result.data.map(i=>{
        res.result.songs.map(idx=>{
          if(idx.id==i.id){
            idx['time'] = i.time
          }
        })
      })
      this.singelResult = res.result.songs
      this.resultCount = res.result.songCount
      this.$nextTick(()=>{
        a.close()
      })
      document.querySelector('.main-show').scrollTop = 0
    },
    // 页码点击处理函数
    currentPage(cur){
      console.log(cur);
      this.requestparams.current = cur
      switch (this.tabActive){
        case 0:
          this.getSingleResult(this.requestparams.keywords,this.requestparams.limit,this.requestparams.current,this.requestparams.type)
          break
      }
    },
    prevClick(i){
      console.log(i);
    },
    nextClick(i){
      console.log(i);
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
  h3 {
    margin: .4rem;
  }
  .search-word{
    margin-left: .5rem;
  }
}
.components-show {
  padding-bottom: 5rem;
}
.main-tab {
    display: flex;
    align-items: center;
    width: 90%;
    .tab-item {
      cursor: pointer;
      position: relative;
      padding: .4rem .6rem;
      font-size: .8rem;
    }
    .tab-active {
      font-weight: 700;
      font-size: .8rem;
    }
    .tab-active::after {
          position: absolute;
          content: '';
          width: 60%;
          height: 1px;
          background: #ec4141;
          border-radius: 10px;
          display: block;
          padding-top: 1px;
          left: 50%;
          transform: translateX(-50%);
          bottom: -1px;
    }
  }
  .view-tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .search-result-count {
      width: 10%;
      font-size: .7rem;
      color: rgb(117, 117, 117);
    }
  }
  ::v-deep .el-pagination{
    text-align: center;
    margin: 1rem auto;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ec4141;
  }
</style>